<template>
  <view class="bd">
    <view class="list">
      <view
        class="item"
        v-for="(v, index) in list"
        :class="{ active: currentItem.id == v.id }"
        :key="index"
        @tap="choose(v)"
        >{{ v.name }}</view
      >
      <!-- <u-picker mode="time" v-model="show" :params="params"></u-picker> -->
      <view
        v-if="showTime"
        class="inp-item uni-item-line flex flex-al-c flex-j-b"
        style="margin-top: 50upx"
      >
        <view class="inp-title" style="width: 250upx; padding: 30upx 0">
          选择末次月经时间</view
        >
        <view>
          <picker
            mode="date"
            :value="preTime"
            @change="dateChange1"
            style="width: 100%"
          >
            {{ preTime }}
          </picker>
        </view>
      </view>
    </view>

    <view style="width: 80%; margin: 100upx auto 0">
      <button type="default" class="sbtn" @tap="nextStep">下一步</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "我在备孕", id: "1" },
        { name: "我怀孕了", id: "2" },
        { name: "我是宝妈", id: "3" },
        { name: "都不是", id: "4" },
      ],
      currentItem: {},

      gravid: "",
      showTime: false,
      preTime: this.config.pub.getDate(),

      user: {},

      // params: {
      // 	year: true,
      // 	month: true,
      // 	day: true,
      // 	hour: false,
      // 	minute: false,
      // 	second: false
      // },
      // show: true
    };
  },
  onLoad(options) {
    //console.log(options)
    this.user = JSON.parse(options.user || "{}");
    //console.log(this.user)
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    choose(v) {
      this.currentItem = v;
      if (v.id == "2") {
        this.gravid = "1";
        this.showTime = true;
      } else {
        if (v.id == "4") {
          this.gravid = "0";
        }
        if (v.id == "1") {
          this.gravid = "2";
        }
        if (v.id == "3") {
          this.gravid = "3";
        }
        this.showTime = false;
      }
      this.user.gravid = this.gravid;
    },
    dateDiffWeek(start, end) {
      var arrDate, objDate1, objDate2, intDays;
      arrDate = start.split("-");
      objDate1 = new Date(arrDate[1] + "-" + arrDate[2] + "-" + arrDate[0]);
      arrDate = end.split("-");
      objDate2 = new Date(arrDate[1] + "-" + arrDate[2] + "-" + arrDate[0]);
      intDays = parseInt(Math.abs(objDate1 - objDate2) / 1000 / 60 / 60 / 24);
      intDays = intDays + 1;
      var WeekNum = parseInt(intDays / 7);
      if (WeekNum < 0 || WeekNum >= 50) {
        // WeekNum = 1;
        uni.showToast({
          title: "孕周有效值为0-50周",
          icon: "none",
        });
        this.preTime = "请重新选择";
      }
    },
    dateChange1(e) {
      console.log(e.target.value);
      this.preTime = e.target.value;
      let nowTime =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate();
      console.log(nowTime);
      this.dateDiffWeek(e.target.value, nowTime);
    },
    nextStep() {
      if (!this.gravid) return;
      //console.log(this.user)
      this.user.gravid = this.gravid;
      this.user.finalMenstruationTime = this.preTime;
      if (this.user.age > 35) {
        uni.navigateTo({
          url: "/pages/reg/disease?user=" + JSON.stringify(this.user),
        });
      } else {
        uni.navigateTo({
          url: "/pages/reg/answer?user=" + JSON.stringify(this.user),
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 70%;
  margin: 0 auto;
  .item {
    border-radius: 50upx;
    text-align: center;
    line-height: 100upx;
    color: #999;
    font-size: 30upx;
    background-color: #eee;
    margin-top: 60upx;
  }
  .item.active {
    background-color: #f0c84f;
    color: #fff;
  }
}
.sbtn {
  background: #18c7e1;
  color: #fff;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
    height: calc(100vh - var(--window-top));
    padding-top: 20rpx;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>